<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>计算属性和methods对比</title>
</head>
<body>

<div id="app1">
    {{ reverseText }}
</div>

<br/>
<div id="app2">
    {{ reverseText() }}  <!--注意此处必须带括号，表示方法的调用-->
</div>
<br/>

<div id="app3">
    {{ now() }}   <!--注意此处必须带括号，表示方法的调用-->
</div>


<div id="app4">
    {{ now }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //使用计算属性完成文字反转功能
    var app1= new Vue({
        el:"#app1",
        data:{
            text:"123,456",
        },
        computed:{
            reverseText:function () {
                return this.text.split(",").reverse().join(",");
            }
        }
    });


    //使用methods属性来完成文字反转功能
    var app2 = new Vue({
        el:"#app2",
        data:{
            text:"123,456",
        },
        methods:{
            reverseText:function () {
                return this.text.split(",").reverse().join(",");
            }
        }
    });


    /*
    * 计算属性是基于它的依赖缓存，一个计算属性所依赖的数据发生变化时，它才会重新取值。
    * */


    /*
    * 这里的Date.now()不是响应式依赖，所以计算属性now不会更新，但是methods则不同，只要重新渲染，它就会被调用，因此函数也就会被执行。
    * */

    /*
    * 使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应该使用计算属性，除非你不希望得到缓存。
    * */
    var app3 = new Vue({
        el:"#app3",
        methods:{
            now:function () {
                return Date.now();
            }
        }
    });


    var app4 = new Vue({
        el:"#app4",
        computed:{
            now:function () {
                return Date.now();
            }
        }
    });

</script>
</body>
</html>